<!--  -->
<template>
  <div class="container bg-cf">
    <el-row class="row">
      <el-col
        :span="6"
        v-for="(item, index) in btnList"
        :key="index"
        @click="change(index)"
        class="ptb-16 tabbox"
      >
        <div class="flex flex-column flex-align-center flex-center header cp">
          <img
            v-if="currentIndex === item.index"
            class="icon mr-6"
            :src="item.active"
            alt=""
          />
          <img v-else class="icon mr-6" :src="item.normal" alt="" />
          <p class="mt-5">
            <span>{{ item.text }}</span>
            <span v-if="item.num">{{ item.num }}</span>
          </p>
        </div>
      </el-col>
    </el-row>
    <!-- 页面内容 -->
    <my-schedule class="b-active" @changeTab="currentIndex = 0"></my-schedule>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { btnList } from '../config/message'
import MySchedule from './MySchedule.vue'
export default defineComponent({
  name: 'comment-left',
  components: { MySchedule },
  emits: ['getIndex'],
  setup(props, { emit }) {
    let currentIndex = ref(0)
    const count = ref(10)
    const load = () => {
      count.value += 2
    }
    const change = (index: number) => {
      currentIndex.value = index
      emit('getIndex', currentIndex.value)
    }
    return {
      currentIndex,
      btnList,
      count,
      change,
      load
    }
  }
})
</script>
<style scoped lang="less">
.container {
  height: 957px;
}
.tabbox {
  border-bottom: 1px solid #f0f0f0;
}
</style>
